<template>
    <div>
        <!-- 版心 -->
        <el-container>
            <el-header>Header</el-header>
            <el-container>
                <el-aside width="200px" style="overflow: hidden;">
                    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                        background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router>
                        <el-submenu :index="item.path" v-for="item in menuesList" :key="item.id">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>{{ item.authName }}</span>
                            </template>
                            <el-menu-item-group v-for="ited in item.children" :key="ited.id">
                                <el-menu-item :index="ited.path">{{ ited.authName }}</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import { Menues } from '@/api/user';

export default {
    data() {
        return {
            menuesList: []
        }
    },
    methods: {
        handleOpen(key, keyPath) { },
        handleClose(key, keyPath) { },
        // 接口请求区域
        // 获取用户列表方法
        async getData() {
            let res = await Menues()
            this.menuesList = res.data.data;
        }
    },
    mounted() {
        this.getData()
    }
}
</script>
<style>
.el-menu {
    height: 90vh;
}
</style>